<template>
  <div class="root">
    <el-container class="main-page-app-root">
      <el-aside class="aside" width="200px">
        <el-menu
            class="menu"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-menu-item index="0" @click="goRouter('/index')">首页管理</el-menu-item>
          <el-menu-item index="1" @click="goRouter('/artist')">艺人管理</el-menu-item>
          <el-menu-item index="2" @click="goRouter('/concert')">演唱会管理</el-menu-item>
          <el-menu-item index="3" @click="goRouter('/venue')">场地管理</el-menu-item>
          <el-menu-item index="4" @click="goRouter('/order')">订单管理</el-menu-item>
          <el-menu-item index="5" @click="goRouter('/city')">城市管理</el-menu-item>
          <el-menu-item index="6" @click="goRouter('/video')">视频管理</el-menu-item>
          <el-menu-item index="7" @click="goRouter('/flow')">流量统计</el-menu-item>
          <el-menu-item index="8" @click="goRouter('/user')">用户管理</el-menu-item>
        </el-menu>

      </el-aside>
      <el-main class="main">
        <el-container>
          <el-header class="header">
            <el-dropdown placement="bottom-start">
              <div class="avatar-area">
                <div class="username">{{userInfo.username}}</div>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item><el-button type="danger" @click="logout">退出登录</el-button></el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-header>
          <el-main class="main">
            <el-divider/>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {useUserStore} from "@/stores/userSore.js";

export default {
  name: "MainView",
  setup() {
    return {
      userStore: useUserStore()
    }
  },
  data() {
    return {
      userInfo: {

      }
    };
  },
  components: {

  },
  methods: {
    logout() {

    },
    handleOpen(key, keyPath){
      console.log(key, keyPath)
    },
    handleClose(key, keyPath){
      console.log(key, keyPath)
    },
    goRouter(path) {
      this.$router.push(path)
    }
  },
  mounted() {
    //  获取应用配置VITE_APP_USER_AUTH_KEY
    const authKey = import.meta.env.VITE_APP_USER_AUTH_KEY;
    //  从缓存中获取用户信息
    const authValue = localStorage.getItem(authKey)

    if (!authValue || authValue.trim() === '') {
      this.$message.error('请先登录')


    } else {
      //  获取用户信息


    }
  },
  watch: {

  },
}
</script>

<style lang="scss" scoped>
  .root {
    .main-page-app-root {
      height: 100vh;
      overflow: auto;
      .aside {
        .menu {
          height: 100%;
        }
      }
      .main {
        height: 100%;

        .header {
          height: 50px;
          display: flex;
          justify-content: right;
          align-items: center;
          .avatar-area {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
        }
        .main {
          padding: 0;
        }
      }
    }
  }
</style>
